/* Drawer */

// We introduce some variables with default values that a theme can override
@xwiki-drawer-bg:                        @xwiki-page-content-bg;
@xwiki-drawer-width:                     280px;
@xwiki-drawer-brand-bg:                  @navbar-default-bg;
@xwiki-drawer-brand-border:              @navbar-default-border;
@xwiki-drawer-brand-link-color:          @navbar-default-link-color;
@xwiki-drawer-brand-link-hover-color:    @navbar-default-link-hover-color;
@xwiki-drawer-brand-user-color:          @navbar-default-color;
@xwiki-drawer-menu-item-padding:         @navbar-padding-vertical 0 @navbar-padding-vertical @navbar-padding-horizontal;
@xwiki-drawer-menu-item-size:            @font-size-base;
@xwiki-drawer-menu-item-color:           @text-color;
@xwiki-drawer-menu-item-bg:              @xwiki-drawer-bg;
@xwiki-drawer-menu-item-icon-padding:    @navbar-padding-horizontal;
@xwiki-drawer-menu-item-hover-color:     @navbar-inverse-link-active-color;
@xwiki-drawer-menu-item-hover-bg:        @navbar-inverse-link-active-bg;
@xwiki-drawer-menu-subitem-indent:       @navbar-padding-horizontal * 2;
@xwiki-drawer-menu-item-seperator-color: darken(@xwiki-page-content-bg, 10%);
@xwiki-drawer-menu-category-bg:          @xwiki-drawer-menu-item-seperator-color;
@xwiki-drawer-menu-category-color:       lighten(@xwiki-drawer-menu-item-color, 10%);

.drawer--right .drawer-nav {
  right: -@xwiki-drawer-width;
}



#tmDrawer.drawer-nav {
  background-color: @xwiki-drawer-bg;
  width: @xwiki-drawer-width;
  right: 0;
  overflow: hidden;
  // Fallback for browsers that don't support dvh.
  height: 100vh;
  height: 100dvh;
  margin-right: -@xwiki-drawer-width;
  transition: margin-right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  padding: 0;
  border: 0;
  overflow-y: auto;
  // We overwrite max-height over browser defaults for dialog
  // Fallback for browsers that don't support dvh.
  max-height: 100vh;
  max-height: 100dvh;
  
  &::backdrop {
    opacity: 0;
    background-color: #fff - @xwiki-page-content-bg;
    transition: opacity .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  }

  &[open]:not(.drawer-transitioning) {
    margin-right: 0;
    &::backdrop {
      opacity: 0.2;
    }
  }

  & .drawer-menu {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;

    & .drawer-menu-item {
      font-size: 1rem;
      display: block;
      padding: .75rem;
      text-decoration: none;
      color: @xwiki-drawer-menu-item-color;
    }

    & .drawer-menu-item:hover {
      color: @xwiki-drawer-menu-item-hover-color;
      background-color: transparent;
    }

    // Brand =================================================================
    .drawer-brand {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 4px;
      background-color: @xwiki-drawer-brand-bg;
      border-bottom: 1px solid @xwiki-drawer-brand-border;
      font-weight: 400;
      line-height: inherit;
      padding: 20px 16px;

      a {
        display: block;
        color: @xwiki-drawer-brand-link-color;
        padding: 0;

        &:hover, &:focus {
          color: @xwiki-drawer-brand-link-hover-color;
          text-decoration: none;
        }
      }

      // Avatar styling
      img.avatar {
        border-radius: 50%;
        height: 50px;
        width: 50px;
        // Overwrite the default for img and avoid squishing down the avatar when the account name is too large
        max-width: unset;
      }

      .brand-links {
        flex-grow: 1;
        margin-left: 16px;

        a {
          font-size: @font-size-base;
        }

        // Resetting avatar styling
        img {
          border-radius: 0;
          float: none;
          height: auto;
          width: auto;
        }

        .brand-user {
          color: @xwiki-drawer-brand-user-color;
          font-weight: 400;
          // Make sure we wrap the name whatever its length.
          overflow-wrap: anywhere;
        }
      }
    }

    // Menu Item =============================================================
    a.drawer-menu-item {
      font-size: @xwiki-drawer-menu-item-size;
      font-weight: 400;
      margin-top: 0;
      padding: @xwiki-drawer-menu-item-padding;

      &, &:hover, &:focus {
        background-color: @xwiki-drawer-menu-item-bg;
        color: @xwiki-drawer-menu-item-color;
        text-decoration: none;
      }

      &:hover {
        background-color: @xwiki-drawer-menu-item-hover-bg;
        color: @xwiki-drawer-menu-item-hover-color;
      }
    }
  }

  // Sub Item =============================================================
  .drawer-dropdown-menu {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;

    a.drawer-menu-item {
      padding-left: @xwiki-drawer-menu-subitem-indent;
    }
  }

  // Menu Category ========================================================
  .drawer-category-header {
    background-color: @xwiki-drawer-menu-category-bg;
    color: @xwiki-drawer-menu-category-color;
    padding: @xwiki-drawer-menu-item-padding;
    font-size: larger;
  }
}

.drawer-menu-item-icon {
  display: inline-block;
  width: 30px;
  vertical-align: middle;
}

.drawer-menu-item-text {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}

.drawer-menuseparator {
  border-top: 1px solid @xwiki-drawer-menu-item-seperator-color;
  margin: 12px 0;
}

// Special styling for logout =============================
#tmLogout {
  font-style: italic;
}
